import { makeObservable, observable, action, reaction } from 'mobx';

class Todo {
  constructor (todo) {
    this.id = todo.id;
    this.title = todo.title;
    this.isCompleted = todo.isCompleted || false;
    this.isEditing = false;
    
    makeObservable(this, {
      title: observable,
      isCompleted: observable,
      isEditing: observable,
      complete: action.bound,
      changeEditing: action.bound,
      changeTitle: action.bound,
    });

    // 监测数据变化
    reaction(
      () => this.isCompleted,
      (current, previous) => {
        console.log('todo has changed, previous: ', previous, ' , current: ', current);
      }
    );
  }

  complete () {
    this.isCompleted = !this.isCompleted;
  }

  changeEditing () {
    this.isEditing = true;
  }

  changeTitle (title) {
    this.title = title;
    this.isEditing = false;
  }
}

export default Todo;